<template>
  <div class="register-container">
    <div class="register-card">
      <!-- 头部区域 -->
      <div class="register-header">
        <div class="logo-section">
          <div class="logo-icon">
            <svg
              width="48"
              height="48"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="48" height="48" rx="12" fill="#667eea" />
              <path d="M24 12L32 20L24 28L16 20L24 12Z" fill="white" />
              <path d="M24 20L28 24L24 28L20 24L24 20Z" fill="#667eea" />
            </svg>
          </div>
          <h1 class="app-title">零码 AI 应用生成</h1>
        </div>
        <p class="app-subtitle">不写一行代码，生成完整应用</p>
      </div>

      <!-- 注册表单 -->
      <div class="register-form-section">
        <h2 class="form-title">创建账户</h2>
        <p class="form-subtitle">请填写以下信息完成注册</p>

        <a-form
          :model="formState"
          name="registerForm"
          autocomplete="off"
          @finish="handleSubmit"
          class="register-form"
        >
          <a-form-item
            name="userAccount"
            :rules="[
              { required: true, message: '请输入账号' },
              { min: 4, message: '账号不能少于 4 位' },
              { max: 20, message: '账号不能超过 20 位' },
              { pattern: /^[a-zA-Z0-9_]+$/, message: '账号只能包含字母、数字和下划线' },
            ]"
            class="form-item"
          >
            <div class="input-wrapper">
              <div class="input-icon">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z"
                    fill="#9CA3AF"
                  />
                  <path
                    d="M10 12C6.68629 12 4 14.6863 4 18H16C16 14.6863 13.3137 12 10 12Z"
                    fill="#9CA3AF"
                  />
                </svg>
              </div>
              <a-input
                v-model:value="formState.userAccount"
                placeholder="请输入账号"
                class="custom-input"
                size="large"
              />
            </div>
          </a-form-item>

          <a-form-item
            name="userPassword"
            :rules="[
              { required: true, message: '请输入密码' },
              { min: 8, message: '密码不能少于 8 位' },
              { max: 20, message: '密码不能超过 20 位' },
            ]"
            class="form-item"
          >
            <div class="input-wrapper">
              <div class="input-icon">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M15 8H15.01M5 8C5 5.79086 6.79086 4 9 4C11.2091 4 13 5.79086 13 8C13 8.74138 12.7972 9.43638 12.4462 10.0318L15 12.5856V16H5V12.5856L7.55379 10.0318C7.20276 9.43638 7 8.74138 7 8Z"
                    stroke="#9CA3AF"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
              <a-input-password
                v-model:value="formState.userPassword"
                placeholder="请输入密码"
                class="custom-input"
                size="large"
              />
            </div>
          </a-form-item>

          <a-form-item
            name="checkPassword"
            :rules="[
              { required: true, message: '请确认密码' },
              { validator: validateConfirmPassword },
            ]"
            class="form-item"
          >
            <div class="input-wrapper">
              <div class="input-icon">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M15 8H15.01M5 8C5 5.79086 6.79086 4 9 4C11.2091 4 13 5.79086 13 8C13 8.74138 12.7972 9.43638 12.4462 10.0318L15 12.5856V16H5V12.5856L7.55379 10.0318C7.20276 9.43638 7 8.74138 7 8Z"
                    stroke="#9CA3AF"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
              <a-input-password
                v-model:value="formState.checkPassword"
                placeholder="请确认密码"
                class="custom-input"
                size="large"
              />
            </div>
          </a-form-item>

          <a-form-item
            name="validCode"
            :rules="[{ required: true, message: '请输入验证码' }]"
            class="form-item"
          >
            <div class="input-wrapper">
              <div class="input-icon">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 12L11 14L15 10M19 4H5C3.89543 4 3 4.89543 3 6V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V6C21 4.89543 20.1046 4 19 4Z"
                    stroke="#9CA3AF"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
              <a-input
                v-model:value="formState.validCode"
                placeholder="请输入验证码"
                class="custom-input"
                size="large"
              />
            </div>
          </a-form-item>

          <div class="form-actions">
            <a-form-item class="submit-item">
              <a-button
                type="primary"
                html-type="submit"
                class="register-button"
                size="large"
                :loading="loading"
              >
                注册
              </a-button>
            </a-form-item>

            <div class="login-link">
              <span class="login-text">已有账号？</span>
              <RouterLink to="/user/login" class="login-link-text">立即登录</RouterLink>
            </div>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { userRegister } from '@/api/userController'

const formState = reactive<API.UserRegisterRequest>({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
  validCode: '',
})

const router = useRouter()
const loading = ref(false)

/**
 * 验证确认密码
 */
const validateConfirmPassword = async (_rule: any, value: string) => {
  if (value === '') {
    throw new Error('请确认密码')
  } else if (value !== formState.userPassword) {
    throw new Error('两次输入的密码不一致')
  }
}

/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: any) => {
  loading.value = true
  try {
    const res = await userRegister(values)
    if (res.data.code === 0) {
      message.success('注册成功，请登录')
      router.push({
        path: '/user/login',
        replace: true,
      })
    } else {
      message.error('注册失败，' + res.data.message)
    }
  } catch (error) {
    message.error('注册失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.register-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.register-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.logo-icon {
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.logo-icon:hover {
  transform: scale(1.05);
}

.app-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.5px;
}

.app-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.register-form-section {
  margin-top: 32px;
}

.form-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  text-align: center;
}

.form-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 32px 0;
  text-align: center;
}

.register-form {
  width: 100%;
}

.form-item {
  margin-bottom: 24px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-input {
  padding-left: 48px !important;
  height: 56px !important;
  border-radius: 12px !important;
  border: 2px solid #e5e7eb !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  background: #fafafa !important;
}

.custom-input:hover {
  border-color: #d1d5db !important;
  background: #ffffff !important;
}

.custom-input:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
  background: #ffffff !important;
}

.custom-input::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
}

.form-actions {
  margin-top: 32px;
}

.submit-item {
  margin-bottom: 24px;
}

.register-button {
  width: 100% !important;
  height: 56px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.register-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
}

.register-button:active {
  transform: translateY(0) !important;
}

.login-link {
  text-align: center;
  font-size: 14px;
}

.login-text {
  color: #6b7280;
  margin-right: 8px;
}

.login-link-text {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.login-link-text:hover {
  color: #5a67d8;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-container {
    padding: 16px;
  }

  .register-card {
    padding: 32px 24px;
    border-radius: 20px;
  }

  .app-title {
    font-size: 24px;
  }

  .form-title {
    font-size: 20px;
  }

  .custom-input {
    height: 52px !important;
    font-size: 15px !important;
  }

  .register-button {
    height: 52px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .register-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .app-title {
    font-size: 22px;
  }

  .form-title {
    font-size: 18px;
  }

  .custom-input {
    height: 48px !important;
    font-size: 14px !important;
  }

  .register-button {
    height: 48px !important;
    font-size: 14px !important;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .register-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .register-card {
    background: rgba(30, 30, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .app-title,
  .form-title {
    color: #f9fafb;
  }

  .app-subtitle,
  .form-subtitle,
  .login-text {
    color: #9ca3af;
  }

  .custom-input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
  }

  .custom-input:hover {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
  }

  .custom-input:focus {
    background: #4b5563 !important;
    border-color: #667eea !important;
  }

  .custom-input::placeholder {
    color: #9ca3af !important;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.register-card {
  animation: fadeInUp 0.6s ease-out;
}

/* 焦点可访问性 */
.custom-input:focus,
.register-button:focus,
.login-link-text:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* 加载状态 */
.register-button.ant-btn-loading {
  opacity: 0.8;
  cursor: not-allowed;
}
</style>
